<template>
	<view class="container">
		<!-- 顶部欢迎区域 -->
		<view class="welcome-section">
			<view class="welcome-text">
				<text class="greeting">您好！</text>
				<text class="subtitle">欢迎使用智能健康分析助手</text>
			</view>
			<view class="health-icon">🏥</view>
		</view>

		<!-- 快速功能卡片 -->
		<view class="quick-actions">
			<view class="action-card" @click="navigateToHealth">
				<view class="card-icon">📊</view>
				<text class="card-title">记录健康数据</text>
				<text class="card-desc">输入您的身体数据</text>
			</view>
			
			<view class="action-card" @click="navigateToAnalysis">
				<view class="card-icon">🤖</view>
				<text class="card-title">AI健康分析</text>
				<text class="card-desc">智能分析您的健康状况</text>
			</view>
			
			<view class="action-card" @click="navigateToAdvice">
				<view class="card-icon">💡</view>
				<text class="card-title">获取健康建议</text>
				<text class="card-desc">个性化健康建议</text>
			</view>
		</view>

		<!-- 今日健康提醒 -->
		<view class="daily-tip">
			<view class="tip-header">
				<text class="tip-title">💡 今日健康小贴士</text>
			</view>
			<view class="tip-content">
				<text class="tip-text">{{dailyTip}}</text>
			</view>
		</view>

		<!-- 健康数据概览 -->
		<view class="health-overview" v-if="healthData">
			<view class="overview-header">
				<text class="overview-title">📈 最近健康数据</text>
			</view>
			<view class="overview-content">
				<view class="data-item">
					<text class="data-label">体重</text>
					<text class="data-value">{{healthData.weight}}kg</text>
				</view>
				<view class="data-item">
					<text class="data-label">BMI</text>
					<text class="data-value">{{healthData.bmi}}</text>
				</view>
				<view class="data-item">
					<text class="data-label">血压</text>
					<text class="data-value">{{healthData.bloodPressure}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dailyTip: '每天喝8杯水，保持身体水分充足，有助于新陈代谢和皮肤健康。',
				healthData: null
			}
		},
		onLoad() {
			this.loadHealthData()
		},
		onShow() {
			this.loadHealthData()
		},
		methods: {
			navigateToHealth() {
				uni.switchTab({
					url: '/pages/health/health'
				})
			},
			navigateToAnalysis() {
				uni.switchTab({
					url: '/pages/analysis/analysis'
				})
			},
			navigateToAdvice() {
				uni.switchTab({
					url: '/pages/advice/advice'
				})
			},
			loadHealthData() {
				// 从本地存储加载健康数据
				const data = uni.getStorageSync('healthData')
				if (data) {
					this.healthData = data
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.welcome-section {
		background: linear-gradient(135deg, #4CAF50, #45a049);
		border-radius: 20rpx;
		padding: 40rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
	}

	.welcome-text {
		flex: 1;
	}

	.greeting {
		font-size: 48rpx;
		font-weight: bold;
		display: block;
		margin-bottom: 10rpx;
	}

	.subtitle {
		font-size: 28rpx;
		opacity: 0.9;
	}

	.health-icon {
		font-size: 80rpx;
	}

	.quick-actions {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.action-card {
		background: white;
		border-radius: 15rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}

	.card-icon {
		font-size: 60rpx;
		margin-right: 20rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 5rpx;
	}

	.card-desc {
		font-size: 24rpx;
		color: #666;
	}

	.daily-tip {
		background: white;
		border-radius: 15rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}

	.tip-header {
		margin-bottom: 20rpx;
	}

	.tip-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.tip-text {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}

	.health-overview {
		background: white;
		border-radius: 15rpx;
		padding: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
	}

	.overview-header {
		margin-bottom: 20rpx;
	}

	.overview-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.overview-content {
		display: flex;
		justify-content: space-around;
	}

	.data-item {
		text-align: center;
	}

	.data-label {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 10rpx;
	}

	.data-value {
		font-size: 32rpx;
		font-weight: bold;
		color: #4CAF50;
	}
</style>
